<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title>注册</title>
		<link rel="stylesheet" type="text/css" href="css/common.css" />
		<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
		<style type="text/css">
			.box {
				width: 100%;
				height: 100%;
				background: url(img/share_bg.png) no-repeat left top;
				background-size: 100%;
			}
			
			.person_news {
				width: 100%;
				height: 245px;
				padding-top: 345px;
				display: flex;
				flex-direction: column;
				/*justify-content: center;*/
				align-items: center;
			}
			
			.pic {
				width: 114px;
				height: 114px;
				border-radius: 50%;
				overflow: hidden;
			}
			
			.pic img {
				width: 100%;
				height: 100%;
			}
			
			.nickname {
				padding-top: 28px;
				font-weight: bold;
				color: #ffd800;
				font-size: 36px;
			}
			
			.code {
				color: #ffffff;
				font-size: 24px;
				margin-top: 20px;
			}
			
			.register {
				width: 100%;
				padding-top: 184px;
			}
			
			.register div {
				height: 70px;
				margin: 0 76px;
				padding-left: 36px;
				background-color: #ffffff;
				border-radius: 6px;
				overflow: hidden;
			}
			
			.register div input {
				width: 100%;
				height: 100%;
				font-size: 24px;
				border: none;
			}
			
			.register div:nth-of-type(2) {
				margin-top: 34px;
				margin-bottom: 34px;
			}
			
			.register div:nth-of-type(2) input {
				float: left;
				display: inline-block;
			}
			
			.register div:nth-of-type(2) input:nth-child(1) {
				width: 65%;
			}
			
			.register div:nth-of-type(2) input:nth-child(2) {
				width: 35%;
				background-color: #FFFFFF;
				color: #d51132;
			}
			
			.register div:nth-of-type(4) {
				background-color: #ffea78;
				padding-left: 0;
				margin-top: 68px;
				margin-bottom: 143px;
			}
			
			.register div:nth-of-type(4) input {
				background-color: transparent;
				font-size: 26px;
				font-weight: 600;
				color: #d20023;
			}
		</style>
		
	</head>

	<body style="width: 100%;height: 100%;">
		<div class="box">
			<div class="person_news">
				<div class="pic">
					<img id="imgPortrait"  />
				</div>
				<div class="nickname" id="nickname"></div>
				<div class="code">
					<span class="class">邀请码：</span>
					<span class="class" id="codeText"></span>
				</div>
			</div>
			<div class="register">
				<form action="" method="">
					<div>
						<input type="text" id="phone" value="" placeholder="请输入注册手机号" />
					</div>
					<div>
						<input type="text" id="code" value="" placeholder="6位数验证码" />
						<input type="button" id="" value="获取验证码" onclick="settime(this)" />
						<input  type="hidden" id="hideCode"/>
					</div>
					<div>
						<input type="text" id="pwd" value="" placeholder="设置6-16位新密码" />
					</div>
					<div>
						<input type="button" id="btn" value="快速注册" />
					</div>
				</form>
			</div>
		</div>
	</body>
	<script type="text/javascript">

	    function GetQueryString(name)
		{
		    var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
		    var r = window.location.search.substr(1).match(reg);
		    if(r!=null)return  unescape(r[2]); return null;
		}
	    
	    
		    var codeText = GetQueryString("codeText");
		    var userId = GetQueryString("userId");
		    $("#codeText").text(codeText);
		    
		//获取用户头像和名字
		
		if(userId!=null){
			
	        $.ajax({
						contentType: "application/json",
						type:"GET",
						url:"/shop-cloud-api/api/getUserId?userId="+userId,
						async:false,
						success: function (data)
				        {
				     	
				        	$('#nickname').html(data.body.nickname);
				        	
				            if(data.body.portrait){
				            	$("#imgPortrait").attr('src',data.body.portrait);
				            	
				            }else{
				            	$("#imgPortrait").attr('src',"img/header.png");
				            	
				            }	
				        	
				        }
				        
				    });
	
		}

		function setzoom(psWidth) {
			var oWidth = document.documentElement.clientWidth;
			var scale = oWidth / psWidth;
			document.body.style.zoom = scale;
		}
		window.onresize = function() {
			setzoom(750);
		}
		window.onload = function() {
			setzoom(750);
		}
		
		var btn = document.getElementById("btn");
		btn.onclick=function(){
			var phone = document.getElementById("phone").value;
			var code = document.getElementById("code").value;
			var pwd = document.getElementById("pwd").value;
			var rePhone = /^1\d{10}$/;
			var rePwd = /^[a-zA-Z0-9_-]{6,16}$/;
			if(!phone){
				alert("请输入手机号");
				return false;
			}else if(!rePhone.test(phone)) {
				alert("手机号不正确");
				return false;
			}else if(!code){
				alert("请输入验证码");
				return false;
			}else if(!pwd){
				alert("请设置密码");
				return false;
			}else if(!rePwd.test(pwd)){
				alert("请输入6-16位密码")
			}else{
				
				var hideCode = $("#hideCode").val();
				
				if($('#code').val() == hideCode &&　$('#code').val()){
					
					$.ajax({
						contentType: "application/json",
						type:"GET",
						url:"/shop-cloud-api/api/registerGMC?phone="+phone+"&password="+pwd+"&qrCode="+codeText+"&userId="+userId,
						async:true,
						success: function (data)
				        {
				        	if(data=="2"){
				        		window.location.href="download.html?codeText="+codeText+"&userId="+userId;
				        	}else{
				        		alert(data);
				        		return;
				        	
				        	}
	
				        }
				        
				    });
				}else{
					alert("验证码有误 ，请重新输入！");
				}
				
				
				
			}
		}
		
		function settime(obj) { 
			
			
			var phone = document.getElementById("phone").value;
			var rePhone = /^1\d{10}$/;
			if(!phone){
				alert("请输入手机号");
                return ;
			}else if(!rePhone.test(phone)) {
				alert("手机号不正确");
                return ;
			}else{
				
			
				$.ajax({
					contentType: "application/json",
					type:"GET",
					url:"/shop-cloud-api/api/getNewCode?phone="+phone+"",
					async:true,
					success: function (data)
			        {
			        	if(data == 1){
			        		alert("此手机号已被注册过!");
			        		return;
			        	}
			        	
			        	$("#hideCode").val(data);
			            //倒计时
			            settime1(obj);
			        },
			        
			    });
			    
		    }
		}
		//获取验证码
		var countdown=60; 
		function settime1(obj) { 
			
				if (countdown == 0) { 
			        obj.removeAttribute("disabled");    
			        obj.value="重新发送验证码"; 
			        countdown = 60; 
			        return;
			    } else { 
			        obj.setAttribute("disabled", true); 
			        obj.value="重新发送(" + countdown + ")"; 
			        countdown--; 
			    } 
				setTimeout(function() { 
				    settime1(obj) 
				},1000);

		
			
			
		}
	</script>

</html>